<template>
  <div class="brand">
    <slot></slot>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in goodsList"
        @click="toShop(item.id);top(clickEvent)"
        :key="index"
      >
        <img v-lazy="item.list_pic_url" />
        <div class="item-des">
          <h4>{{item.name}}</h4>
          <p>{{item.retail_price | priceFilter}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ShopList } from "@/request/api";

export default {
  props: ["goodsList", "clickEvent"],
  // 解决相同路由，参数不同，页面不跳转
  methods: {
    toShop(e) {
      this.$router.push("/details/" + e);
    },
    // 返回顶部
    top(e) {
      if (e) {
        let timer = setInterval(function() {
          let osTop =
            document.documentElement.scrollTop || document.body.scrollTop;
          let ispeed = Math.floor(-osTop / 5);
          document.documentElement.scrollTop = document.body.scrollTop =
            osTop + ispeed;
          if (osTop === 0) {
            clearInterval(timer);
          }
        }, 30);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.brand {
  .title {
    text-align: center;
    h3 {
      font-weight: normal;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 49%;
      background-color: #fff;
      margin-bottom: 5px;
      img {
        width: 100%;
      }
      .item-des {
        text-align: center;
        h4 {
          font-weight: normal;
          margin: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        p {
          font-weight: normal;
          margin: 0;
          font-size: 16px;
          height: 30px;
          line-height: 30px;
          color: darkred;
        }
      }
    }
  }
}
</style>